<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Home</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #040d21;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    .d-none {
      display: none;
    }
    .wrap{
      width: 80%;
      margin: 0 auto;
      position: relative;
      height: 100%;
    }

    .menu-wrap{
      position: relative;
      z-index: 100;
    }
    .word{
      color: white;
      font-size: 72px;
      line-height: 76px;
      position: absolute;
      top: 30%;
      left: 5%;
      width: 700px;
      z-index: 1;
    }

    .js-webgl-globe-data{
      display: inline-block;
      position: absolute;
      right: 0;
      z-index: 1;
      /*top: 100px;*/
      box-sizing: border-box;
      height: 100%;
    }

    .js-webgl-globe {
      height: 900px;
      width: 900px;
    }
    .astro{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 500px;
      z-index: 2;
    }
    .bottom{
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
    }
    .bottom svg{
      position: relative;
      top: 10px;
    }
    .back-img{
      width: 200%;
      /*height: 100%;*/
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
    }
  </style>
  <link rel="stylesheet" href="./css/common.css">
</head>

<body>
<div class="wrap">
  <div class="menu-wrap">
    <button onclick="openDialog()">弹窗</button>
    <button onclick="openWindow()">新窗口</button>
    <button onclick="openConfirm()">提示</button>
    <button onclick="sendMessage()">消息</button>
    <button onclick="openLoading()">加载</button>
  </div>
  <div class="js-webgl-globe-data">
    <div class="js-webgl-globe"></div>
  </div>
  <h1 class="word"> Hello world! </h1>
  <img class="astro" src="./images/astro-mona.svg" alt=""/>
</div>
<div class="bottom">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" preserveAspectRatio="none" viewBox="0 0 1680 40" class="position-absolute width-full z-1" style="bottom: -1px;"><path d="M0 40h1680V30S1340 0 840 0 0 30 0 30z" fill="#fff"></path></svg>
  <div style="height: 60px;background: white;"></div>
</div>
<!--<img class="back-img" src="./images/hero-glow.svg" alt=""/>-->
<script crossorigin="anonymous" defer="defer" src="./index.js"></script>
<script>
  function openConfirm(){
    window.electronAPI.$confirm({
      title: '系统提示',
      message: '此操作将永久删除该文件, 是否继续?',
      cancelText: '取消',
      confirmText: '确认'
    }).then(r => {
      console.log(r)
    }).catch(e => {
      console.log('hi')
    })
  }
  function openWindow(){
   window.electronAPI.openWindow({
     name: 'about',
     title: '关于我们',
     readyToShow: true,
     page: '/pages/about.html',
     preload: 'about.js',
     width: 360,
     height: 500,
     minimizable: false,
     maximizable: false,
     resizable: false
   })
  }

  function openDialog(){
    window.electronAPI.$dialog({
      page: '/pages/agreement.html',
      preload: 'dialog.js',
      cancelBtn: false
    }).then(r => {
      console.log(r)
    })
  }

  function sendMessage(){
    window.electronAPI.$message('message')
  }

  let loading = false
  function openLoading(){
    loading ? window.electronAPI.$loading.close() : window.electronAPI.$loading.open()
    loading = !loading
  }

  window.addEventListener('message',msg => {
    console.log(msg)
  })
</script>
</body>
</html>
